<template lang="pug">
.search-toolbar
  button.select-city(v-if="city",@click="$router.push({name:'home:city'})") {{profile.region}}
  input(type="search",ref="keyworldEl",placeholder="请输入关键字",@keyup="textKeyDownHandler",:value="$route.params.key")
  button(@click="searchHandler") 查询
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      profile: 'getProfile'
    })
  },
  props: {
    from: {
      type: String,
      default: null
    },
    city: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    searchHandler () {
      if (this.$route.name !== 'sorts:search') {
        window.sessionStorage.setItem('search_referer', JSON.stringify({name: this.$route.name, params: this.$route.params}))
      }
      this.$router.push({name: 'sorts:search', params: {key: this.$refs['keyworldEl'].value}})
    },
    textKeyDownHandler () {
      if (this.$refs['keyworldEl'].value === '') {
        let searchReferer = window.sessionStorage.getItem('search_referer')
        if (searchReferer) {
          this.$router.push(JSON.parse(searchReferer))
        }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.search-toolbar
  width: 100%
  height: .9rem
  background: #990000
  padding: .1rem .2rem
  display: flex
  justify-content: flex-start
  flex-direction: row
  flex-wrap: wrap
  input[type=search]
    font-size: .26rem
    line-height: .67rem
    width: 33vh
    border: none
    background: #ffcccc
    border-radius: .2rem
    outline: none
    color: #b00001
    text-indent: .4rem
  button
    color: #fff
    background: #b00001
    border: none
    padding: .1rem .2rem
    margin: 0 .2rem 0
    box-sizing: border-box
    border-radius: .1rem
    outline: none
    cursor: pointer
  button.select-city
    background: #990000
    &:after
      content: ' v'
</style>
